<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程设置</title>
  <link href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/style.css" rel="stylesheet">
  <style>
    .container form.form-horizontal {
      padding: 15px;
    }
  </style>
</head>

<body>
  <div class="shadow-box"></div>
  <div class="container">
    <form class="form-horizontal">
      <div class="form-group col-xs-10">
        <div class="col-xs-2">
          <input class="form-control" type="text" placeholder="课程名称">
        </div>
        <div class="col-xs-2">
          <input class="form-control" type="text" placeholder="课程代码"">
                </div>
                <div class=" col-xs-3">
          <select class="form-control" name="" id="" placeholder="-专业名称-">
            <option value="" selected>-专业名称-</option>
            <option value="">计算机应用</option>
            <option value="">汽车运用与维修</option>
            <option value="">机电设备安装与维修</option>
            <option value="">有色金属冶炼</option>
            <option value="">中餐烹饪饭店运营与管理</option>
            <option value="">高星级饭店运营与管理</option>
            <option value="">民族音乐与舞蹈</option>
            <option value="">美发与形象设计</option>
          </select>
        </div>
        <div class="col-xs-2">
          <select class="form-control" name="" id="" placeholder="-专业名称-">
            <option value="" selected>-课程性质-</option>
            <option value="">必修</option>
            <option value="">限选</option>
            <option value="">任选</option>
          </select>
        </div>
        <div class="col-xs-3">
          <select class="form-control" name="" id="" placeholder="-专业名称-">
            <option value="" selected>-招生类别-</option>
            <option value="">初中毕业起点</option>
          </select>
        </div>
      </div>
      <button type="submit" class="btn btn-default col-xs-2">查询</button>
    </form>
    <div class="row">
      <table class="table table-bordered table-hover">
        <tr class="table-brand">
          <td colspan="12">课程设置</td>
        </tr>
        <tr>
          <th>序号</th>
          <th>专业名称</th>
          <th>课程名称</th>
          <th>课程代码</th>
          <th>课程类别</th>
          <th>课程性质</th>
          <th>学分</th>
          <th>总课时</th>
          <th>课程学时</th>
          <th>实验学时</th>
          <th>实践学时</th>
          <th>操作</th>
        </tr>
        <tr>
          <td>1</td>
          <td>计算机应用</td>
          <td>计算机基础</td>
          <td>051600</td>
          <td>公共基础课</td>
          <td>必修</td>
          <td>1</td>
          <td>16</td>
          <td>8</td>
          <td>8</td>
          <td>0</td>
          <td>
            <button class="btn-link">修改</button> |
            <button class="btn-link">删除</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    let tbody = document.querySelector('table tbody');
    for (let i = 0; i < 8; i++) {
      let tr = document.querySelectorAll('table tr')[2].cloneNode(true);
      tbody.appendChild(tr)
    }
  </script>
</body>

</html>